import { html } from './index'
import { ShPopupOptions, ShPopup } from './ShPopup'


export class ShPopConfirm extends ShPopup { 

    constructor() {
        super()

        this.$shadow.firstElementChild!.insertAdjacentElement('afterend', html`
            <style>
                :host {
                    display: flex;
                    flex-direction: column;
                    padding: 1em;
                    border-radius: 6px;
                }
                :host::before {
                    position: absolute;
                    display: block;
                    content: ' ';
                    width: 10px;
                    height: 10px;
                    top: -6px;
                    border-top: var(--border-ctrl);
                    border-left: var(--border-ctrl);
                    background-color: white;
                    transform: rotate(45deg);
                }
            </style>        
        `[0] as HTMLElement)

    }
}
customElements.define('sh-pop-confirm', ShPopConfirm)


export async function popConfirm(message: string, options: ShPopupOptions): Promise<'ok' | 'cancel'> {
    return new Promise((resolve) => { 
        const $pop = new ShPopConfirm()

        const onOk = () => {
            $pop.hide()
            resolve('ok')
        }

        const onCancel = () => {
            $pop.hide()
            resolve('cancel')
        }

        $pop.append(...html`
            <div style="margin-bottom:1em;display:flex;">
                <span style="margin-right:1em;height:1.5em;display:flex;align-items:center;">
                    <svg width="20" height="20" viewBox="0 0 48 48" fill="none"  stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M24 44C29.5228 44 34.5228 41.7614 38.1421 38.1421C41.7614 34.5228 44 29.5228 44 24C44 18.4772 41.7614 13.4772 38.1421 9.85786C34.5228 6.23858 29.5228 4 24 4C18.4772 4 13.4772 6.23858 9.85786 9.85786C6.23858 13.4772 4 18.4772 4 24C4 29.5228 6.23858 34.5228 9.85786 38.1421C13.4772 41.7614 18.4772 44 24 44Z" fill="#DA0" stroke="#DA0" />
                        <path d="M24 28.6248V24.6248C27.3137 24.6248 30 21.9385 30 18.6248C30 15.3111 27.3137 12.6248 24 12.6248C20.6863 12.6248 18 15.3111 18 18.6248" stroke="#FFF" />
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M24 37.6248C25.3807 37.6248 26.5 36.5055 26.5 35.1248C26.5 33.7441 25.3807 32.6248 24 32.6248C22.6193 32.6248 21.5 33.7441 21.5 35.1248C21.5 36.5055 22.6193 37.6248 24 37.6248Z" fill="#FFF" />
                    </svg>
                </span>
                <span style="max-width:20em;line-height:1.5em">${message}</span>
            </div>
            <div style="display:flex;justify-content:flex-end;">
                <sh-button small style="margin-right:0.5em" @click=${onCancel}>取消</sh-button>
                <sh-button primary small @click=${onOk}>确定</sh-button>
            </div>
        `)
        $pop.on('clickout', onCancel)

        $pop.show(options)
    })
}